<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器 语法：任意选择器：hover【悬停】 每个伪类选择器 具备特点 
						所有元素都具备:hover选择器 【常见伪类选择器】
			  */
			 h1:hover{
				background: white;
				color: #cbc9ff;
			 }
			 /* 伪类选择器   :link  超链未点击时状态
							:active 连接被点击时
							:visited 链接被点击后状态
							:hover 链接悬停状态
			主要结合在一起，针对a元素效果				
			  */
			a:link{
				/* 未访问状态 */
				text-decoration: none;
				color: #cbc9ff;
			}
			a:active{
				/* 被点击状态 */
				color: #aa55ff;
			}
			a:visited{
				/* 点击后状态 */
				color: #cbc9ff;
			}
			a:hover{
				font-size: 36px;
				color: bisque;
			}
			/* 伪类选择器 input：focus 获取焦点 鼠标点击输入框的效果
			
			*/
		   input:focus{
			   background-color: #cbc9ff;
		   }
		   /* 伪类选择器  :first-child 第一个儿子元素
						 :last-child 最后一个儿子元素
						 :nth-child(n) 匹配n个儿子元素
			针对父子级关系			 
			*/
		   li:first-child{
			   color: #cbc9ff;
		   }
		   li:last-child{
			   background: #cbc9ff;
		   }
		   li:nth-child(2){
			   font-size: 36px;
		   }
		</style>
	</head>
	<body>
	<h1>鼠标悬停</h1>	
	<a href="#">超链接</a>
	<input type="text" />
	<!-- 元素之间存在父子级关系，默认存在父子级关系 -->
	<ol>
		<li>唐山</li>
		<li>张家口</li>
		<li>邯郸</li>
		<li>承德</li>
	</ol>
	</body>
</html>